<template>
	<view class="browse">
		<view class="map">
			<image src="@/imgs/ditu.png"></image>
			<view class="cu-bar search">
				<view class="search-form round bg-white">
					<text class="cuIcon-search"></text>
					<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" 
					type="text" placeholder="搜索" confirm-type="search"></input>
				</view>
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="cu-item"  :class="index==TabCur?'text-yellow cur':''" v-for="(item,index) in tab"
			 :key="index" @tap="tabSelect(index)" >
				{{item}}
			</view>
		</scroll-view>
		<view class="flex padding qy-bg-white">
			<view class="flex flex-direction bbtn_10 padding-right-xs" @click="xuan=0">
				<button class="cu-btn  round " :class="xuan==0?'bg-yellow text-white':'bg-gray text-grey' ">骑手就近购买(3公里内)</button>
			</view>
			<view class=" flex flex-direction  bbtn_10 padding-left-xs" @click="xuan=1">
				<button class="cu-btn   round"  :class="xuan==1?'bg-yellow text-white':'bg-gray text-grey' ">指定地点购买(推荐)</button>
			</view>
		</view>
		<view class="Process padding-xs" >
		  <view class="process_01">
				<view class="process_01_l">
					<view class="process_01_l_01 qy-bg-yellow text-white">
						<view class="tex">购</view>
					</view>
				</view>
				<view class="process_01_r">
					<view class="text-red">点击选择购买地址</view>
					<input placeholder="请输入详细地址" name="input" class="text-sm"></input>
				</view>
				<view class="process_01_m padding-top-sm">
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="process_01">
				<view class="process_01_l">
					<view class="process_01_l_01 qy-bg-red text-white">
						<view class="tex">收</view>
					</view>
				</view>
				<view class="process_01_r">
					<view class="process_01_r_01">地址</view>
					<span>这里是详细的地址</span>
				</view>
				<view class="process_01_m padding-top-sm">
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class=" padding qy-bg-white">
			<view class=" flex flex-direction  bbtn_10 padding-left-xs" >
				<button class="cu-btn bg-yellow text-white round lg" >下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xuan:0,
				TabCur:0,
				tab:['帮我买','帮我送','帮排队','帮代驾'],
			};
		},
		methods:{
			tabSelect(e) {
				this.TabCur = e
				console.log(this.TabCur)
				this.scrollLeft = (e- 1) * 60
			},
		}
	}
</script>

<style lang="scss">
.browse{
	.map{height: 350px;position: relative;
		image{width: 100%;height: 350px;}
		.search-form{background-color: #fff;}
		.search{position: absolute;top: -10px;left: 5%;width: 90%;
			input{}
		}
	}
	.Process{background-color: #fff;padding: 10px;
		.process_01{display: flex;padding: 10px 0;justify-content: space-between;border-bottom: 1px solid #FAFAFA;
			.process_01_l{width: 10%;display:flex;align-items: center;
				.process_01_l_01{width: 20px;height: 20px;text-align: center;line-height: 20px;font-size: 12px;
				border-radius:16px 16px 16px 0;
				-webkit-transform:rotate(-45deg);
				-moz-transform: ratate(-45deg);
				transform:rotate(-45deg);
					.tex{transform:rotate(45deg);}
				}
			}
			.process_01_r{width: 88%;
				.process_01_r_01{padding-bottom: 5px;}
				span{font-size: 12px;font-weight: 100;}
			}
		}
		
	} 
}
</style>
